<clr-modal [(clrModalOpen)]="opened" [clrModalSize]="'lg'" [clrModalClosable]=false>
    <h3 class="modal-title">{{'APP_REGION_DETAIL'|translate}}</h3>
    <div class="modal-body" *ngIf="item && item.regionVars['provider'] === 'vSphere'">
        <table class="table table-vertical">
            <tbody>
            <tr>
                <th>{{'APP_NAME'|translate}}:</th>
                <td>{{item.name}}</td>
            <tr>
                <th>{{'APP_REGION_PROVIDER'|translate}}:</th>
                <td>{{item.regionVars['provider']}}</td>
            <tr>
                <th>{{'APP_REGION_VCENTER_DATACENTER'|translate}}:</th>
                <td>{{item.datacenter}}</td>
            <tr>
                <th>{{'APP_REGION_VC_HOST'|translate}}:</th>
                <td>{{item.regionVars['host']}}</td>
            <tr>
                <th>{{'APP_REGION_VC_USER'|translate}}:</th>
                <td>{{item.regionVars['username']}}</td>
            <tr>
                <th>{{'APP_CREATED_DATE'|translate}}:</th>
                <td>{{item.createdAt |  date: 'yyyy-MM-dd HH:mm:ss'}}</td>
            </tbody>
        </table>
    </div>
    <div class="modal-body" *ngIf="item && item.regionVars['provider'] === 'OpenStack'">

        <table class="table table-vertical">
            <tbody>
            <tr>
                <th>{{'APP_NAME'|translate}}:</th>
                <td>{{item.name}}</td>
            </tr>
            <tr>
                <th>{{'APP_REGION_PROVIDER'|translate}}:</th>
                <td>{{item.regionVars['provider']}}</td>
            </tr>
            <tr>
                <th>{{'APP_REGION_VCENTER_DATACENTER'|translate}}:</th>
                <td>{{item.datacenter}}</td>
            </tr>
            <tr>
                <th>{{'APP_OPENSTACK_ID'|translate}}:</th>
                <td>{{item.regionVars['identity']}}</td>
            </tr>
            <tr>
                <th>{{'APP_USERNAME'|translate}}:</th>
                <td>{{item.regionVars['username']}}</td>
            </tr>
            <tr>
                <th>{{'APP_OPENSTACK_PROJECT'|translate}}:</th>
                <td>{{item.regionVars['projectId']}}</td>
            </tr>
            <tr>
                <th>{{'APP_OPENSTACK_DOMAIN'|translate}}:</th>
                <td>{{item.regionVars['domainName']}}</td>
            </tr>
            <tr>
                <th>{{'APP_CREATED_DATE'|translate}}:</th>
                <td>{{item.createdAt |  date: 'yyyy-MM-dd HH:mm:ss'}}</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn" (click)="cancel()">{{'APP_CANCEL'|translate}}</button>
    </div>
</clr-modal>
